<!DOCTYPE html>
<html>

<head>
	<title>上传</title>
	<style type="text/css">
		.div-radius {
			display: inline-block;
			text-align: center;
			background: #bbb;
			padding: 0 5px;
			border-radius: 20px;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

	<select id="systemType">
		<option value="ios" selected="true">ios</option>
		<option value="android">android</option>
	</select>
	<br />
	<br />
	<div id="tips"></div>
	<div id="fakeDiv" style="height: 100px; width: 100px; background-color: red;" />
	<form id="form" style="display: none;">
		<input type="file" name="file" id="file" />
		<input type="file" name="file1" id="file1" />
		<img id="img" style="display: block;">
		<button type="submit">按钮</button>
	</form>
	<script type="text/javascript">
		$(function () {

			var systemType = "ios";

			$("#fakeDiv").on("click", function () {
				systemType = $("#systemType").val();
				if (systemType == "android") {
					console.log("click to choose file");
					$("#tips").text("调用hybird方法获取文件地址");
				} else {
					document.getElementById("file").click();
					$("#tips").text("");
				}
			});


			var file = $('#file');
			var img = $('#img');
			var video = $('#video');
			file.on('change', function (e) {
				var fileObj = document.getElementById("file");
				var files = fileObj.files[0];
				var fileObj1 = document.getElementById("file1");
				fileObj1.files = fileObj.files;
				var files1 = fileObj1.files[0];
				// // 获取当前文件对象
				// var currentFile = {
				// 	name:files1.name,
				// 	type:files1.type.split('/')[0],
				// 	size:files1.size
				// };
				// console.log(currentFile);
				// //创建用来读取此文件的对象
				//      var reader = new FileReader();
				//    //使用该对象读取file文件
				//      reader.readAsDataURL(files1);
				//    //读取文件成功后执行的方法函数
				//      reader.onload=function(e){
				//     //读取成功后返回的一个参数e，整个的一个进度事件
				//         console.log(e);
				//     //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
				//     //的base64编码格式的地址
				//     if(currentFile.type == 'video'){
				//     	video.attr('src',e.target.result);
				//     }else{
				//      			img.attr('src',e.target.result);
				//     }
				// }
			});

			$("#file1").on('change', function (e) {
				var fileObj = document.getElementById("file1");
				var files = fileObj.files[0];
				handle(fileObj, files);
			});


			function handle(fileObj, files) {
				var fileObj1 = fileObj;
				var files1 = fileObj1.files[0];
				// 获取当前文件对象
				console.log("files", files1);
				var currentFile = {
					name: files1.name,
					type: files1.type.split('/')[0],
					size: files1.size
				};
				console.log(currentFile);
				//创建用来读取此文件的对象
				var reader = new FileReader();
				//使用该对象读取file文件
				reader.readAsDataURL(files1);
				//读取文件成功后执行的方法函数
				reader.onload = function (e) {
					//读取成功后返回的一个参数e，整个的一个进度事件
					console.log(e);
					//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
					//的base64编码格式的地址
					if (currentFile.type == 'video') {
						video.attr('src', e.target.result);
					} else {
						img.attr('src', e.target.result);
					}
				}
			}
		})

	</script>
</body>

</html>